<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="账号" class="up" prop="uid">
        <el-input
          v-model="form.uid"
          type="text"
          class="up2"
          style="width: 350px"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名" class="up" prop="username">
        <el-input v-model="form.username" type="text" class="up2" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex" prop="gender">
        <el-radio-group v-model="form.gender" class="sex1">
          <el-radio label="男" value="男" class="sex2">男</el-radio>
          <el-radio label="女" value="女" class="sex2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="原密码" class="up" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          class="up2"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" class="up" prop="newPass">
        <el-input
          v-model="form.newPass"
          type="password"
          class="up2"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" class="up" prop="checkPass">
        <el-input
          v-model="form.checkPass"
          type="password"
          class="up2"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" class="up" prop="phone">
        <el-input v-model="form.phone" type="text" class="up2" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" class="up" prop="email">
        <el-input v-model="form.email" type="text" class="up2" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="sub" style="margin-left: 100px;" @click="update">修改</el-button>
        <el-button type="danger" @click="router.push('/')" class="quit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import axios from 'axios'
import { onBeforeMount, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { SM3 } from '@/utils/sm3.js'
import router from '@/router'
import '@/assets/scss/userCom/updateF.scss'
const form = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: '',
  checkPass: '',
  newPass: ''
})
const formRef = ref(null)
const validatePass5 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.newPass) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}
const validatePass3 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不可为空'))
  } else {
    if (value !== '') {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'))
      }
    }
    callback()
  }
}
const validatePass4 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请正确填写邮箱'))
  } else {
    if (value !== '') {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'))
      }
    }
    callback()
  }
}
const rules = {
  username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  newPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  checkPass: [{ validator: validatePass5, trigger: 'blur', required: true }],
  phone: [{ validator: validatePass3, trigger: 'blur', required: true }],
  email: [{ validator: validatePass4, trigger: 'blur', required: true }]
}
onBeforeMount(() => {
  form.uid = JSON.parse(sessionStorage.getItem('uid'))
  form.username = JSON.parse(sessionStorage.getItem('username'))
  form.gender = JSON.parse(sessionStorage.getItem('gender'))
  form.phone = JSON.parse(sessionStorage.getItem('phone'))
  form.email = JSON.parse(sessionStorage.getItem('email'))
})
const update = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const password = JSON.parse(sessionStorage.getItem('password'))
      const pass = password
      if (SM3(form.password) === pass) {
        form.password = SM3(form.newPass)
        axios.post('/api/user/updateUser', form).then((res) => {
          if (res.data !== null) {
            ElMessage({
              type: 'success',
              message: '更新成功'
            })
            sessionStorage.setItem('uid', JSON.stringify(res.data.uid))
            sessionStorage.setItem('username', JSON.stringify(res.data.username))
            sessionStorage.setItem('password', JSON.stringify(res.data.password))
            sessionStorage.setItem('gender', JSON.stringify(res.data.gender))
            sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
            sessionStorage.setItem('phone', JSON.stringify(res.data.phone))
            sessionStorage.setItem('email', JSON.stringify(res.data.email))
            router.push('/')
          }
        })
      } else {
        ElMessage({
          type: 'error',
          message: '原密码错误！请确认是本人操作！'
        })
      }
    }
  })
}
</script>
